<template>
    <el-drawer
        v-model="isShow"
        title="预警详情"
        :destroy-on-close="true"
        size="50%"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :show-close="false"
    >
        <el-descriptions :column="1" border>
            <el-descriptions-item label="位置">{{ detail.place }}</el-descriptions-item>
            <el-descriptions-item label="预警时间">{{ detail.warningdate }}</el-descriptions-item>
        </el-descriptions>
        <div class="my-4"></div>
        <el-card shadow="never">
            <template #header>预警照：</template>
            <el-image style="width: 30rem; height: 30rem" :src="detail.photo" fit="contain"/>
        </el-card>
        <template #footer>
            <el-button @click="changeShowStatus">关闭</el-button>
        </template>
    </el-drawer>
</template>

<script setup>
import {getEmergencyWarningDetail} from "@/api/FireAction/FireAlert.js";

const isShow = ref(false);
// 预警 ID
const waringId = ref('')
// 详情内容
const detail = ref({})

// 变更显示状态
const changeShowStatus = () => {
    isShow.value = !isShow.value
    if (!isShow.value) {
    }
}

const showFireAlertDetail = async (id) => {
    changeShowStatus()
    waringId.value = id;
    await getDetail()
}
defineExpose({showFireAlertDetail})

// 获取详情
const getDetail = async () => {
    const res = await getEmergencyWarningDetail(waringId.value)
    detail.value = res.data
}
</script>

<style scoped lang="scss">
:deep(.el-card__body) {
    display: flex;
    justify-content: center;
}
</style>